<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>课程</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="/scriptZIP/layui.min.css">
    <link rel="stylesheet" href="../css/item.css">
    <link rel="stylesheet" href="../css/common2.css">

    <style scoped>
        .layui-row {
            margin-top: 50px;
        }

        .search_img {
            position: absolute;
            right: 3%;
        }

        .one {
            width: 9%;
        }

        .two {
            width: 20%;
        }

        .two input {
            outline: 0;
            width: 120px;
            background-color: #eee0;
            border: 1px solid #d7d7d7;
            border-radius: 2px;
            padding: 4px 6px;
            font-size: 14px;
        }

        .three {
            width: 10%;
        }

        .table tbody tr td {
            border-right: none;
            border-left: none;
            padding: 10px;
        }

        .importall {
            margin-left: 50px;
            margin-top: 20px;
        }

        .import_text {
            width: 200px;
            height: 35px;
            font-size: 14px;
        }

        .long-background-img {
            width: 120px;
            height: 35px;
            margin-left: 2%;
            background: url("../image/enter_longer.png") no-repeat center center !important;
        }

        .layui-input-block {
            margin-left: 174px !important;
        }

        .add_btn {
            padding: 4px 6px;
            background-color: #69bbf4;
            color: white;
            border-radius: 4px;
            margin-left: 20px;
        }

        .add_btn:hover {
            opacity: 0.6;
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div class="layui-row" id="vue-root">


        <div class="layui-col-md6 layui-col-md-offset3">

            <div class="layui-form-item">
                <label class="layui-form-label">课程类目</label>
                <div class="layui-input-block">
                    <select class="classesName layui-input" v-model="item.courseCategoryId">
                        <option :value="undefined" disabled>请选择课程类目</option>
                        <option v-for="courseCategory in courseCategorys" :key="courseCategory.id"
                            :value="courseCategory.id" v-text="courseCategory.name"></option>
                    </select>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">课程名称</label>
                <div class="layui-input-block">
                    <input name="courseName" v-validate="'required'" data-vv-as="课程名称" autocomplete="off"
                        placeholder="请输入课程名称" class="layui-input coursename" v-model="item.name">
                    <!-- <div class="checkout_state" v-text="err('courseName')">
                    </div> -->
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">课程规则</label>
                <div class="layui-input-block" style="padding-top: 13px;line-height: 15px;">
                    <label for="oneToOne">
                        <input type="radio" id="oneToOne" name="type" value="1" title="一对一" checked="checked"
                            v-model="item.type">
                        一对一
                    </label>
                    <label for="oneToMany" style="margin-left: 20px;">
                        <input type="radio" id="oneToMany" name="type" value="2" title="一对多" v-model="item.type">
                        一对多
                    </label>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input name="courseName" v-validate="'required'" data-vv-as="备注信息" autocomplete="off"
                        placeholder="请输入备注信息" class="layui-input coursename" v-model="item.attachment">
                    <!-- <div class="checkout_state" v-text="err('courseName')">
                    </div> -->
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">提前签到时间</label>
                <div class="layui-input-block">
                    <input name="startMinute" v-validate="'required'" data-vv-as="起始时间" autocomplete="off" type="number"
                        placeholder="请输入提前签到时间，单位：分钟" class="layui-input name" v-model="item.startMinute">
                    <!-- <div class="checkout_state" v-text="err('startMinute')"></div> -->
                    <p class="tips">*本次课时开始前多少分钟可以开始签到，到本节课结束时都可以打卡签到</p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">离校打卡时长</label>
                <div class="layui-input-block">
                    <input name="endMinute" autocomplete="off" type="number" placeholder="请输入离校打卡时长，单位：分钟"
                        class="layui-input name" v-model="item.endMinute">
                    <p class="tips">说明：课程后结束后多少分钟内打卡视为离校（若设置）</p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">按课时收费</label>
                <div class="layui-input-block">
                    <!-- 切换开关 -->
                    <!-- <label class="layui-form-switch" style="margin-left: 10px;"> -->
                    <div style="display: flex; align-items: center; padding-top: 13px;line-height: 15px;">
                        <input type="checkbox" v-model="showTable">
                        <div class="add_btn" @click="addtable()" v-if="showTable">添加收费标准</div>
                    </div>

                    <!-- 根据 showTable 的值来决定是否显示表格 -->
                    <div class="table" v-if="showTable">
                        <table class="table_top">
                            <thead>
                                <tr>
                                    <th class="two">名称</th>
                                    <th class="two">数量（课时）</th>
                                    <th class="two">总价(元)</th>
                                    <th class="two">单价(元/课时)</th>
                                    <th class="three">编辑/删除</th>
                                </tr>
                            </thead>
                            <tbody id="list">
                                <tr v-for="(classHour,index) in list" :key="index">
                                    <td class="two">
                                        <input type="text" v-model="classHour.name" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="classHour.number" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="classHour.amount" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two" v-if="classHour.price" v-text="classHour.price"></td>
                                    <td class="two" v-else>自动计算</td>
                                    <td class="three">
                                        <div class="option">
                                            <div class="delete-icon option-icon" @click="del(index)"
                                                style="right: 30%; top:30%;position: absolute;">
                                                <img class="img" src="../image/delete.png" height="20" width="20"
                                                    onmouseover="this.src='../image/delete_light.png'"
                                                    onmouseout="this.src='../image/delete.png'" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">按月收费</label>
                <div class="layui-input-block">
                    <div style="display: flex; align-items: center; padding-top: 13px;line-height: 15px;">
                        <input type="checkbox" v-model="showTable1">
                        <div class="add_btn" @click="addtable1()" v-if="showTable1">添加收费标准</div>
                    </div>
                    <div class="table" v-if="showTable1">
                        <table class="table_top">
                            <thead>
                                <tr>
                                    <th class="two">名称</th>
                                    <th class="two">数量（月）</th>
                                    <th class="two">总价（元）</th>
                                    <th class="two">单价（元/月）</th>
                                    <th class="three">编辑/删除</th>
                                </tr>
                            </thead>
                            <tbody id="list">
                                <tr v-for="(month,index) in list1" :key="index">
                                    <td class="two">
                                        <input type="text" v-model="month.name" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="month.number" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="month.amount" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two" v-if="month.price" v-text="month.price"></td>
                                    <td class="two" v-else>自动计算</td>
                                    <td class="three">
                                        <div class="option">
                                            <div class="delete-icon option-icon" @click="del1(index)"
                                                style="right: 30%; top:30%;position: absolute;">
                                                <img class="img" src="../image/delete.png" height="20" width="20"
                                                    onmouseover="this.src='../image/delete_light.png'"
                                                    onmouseout="this.src='../image/delete.png'" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">按天收费</label>
                <div class="layui-input-block">
                    <!-- 切换开关 -->
                    <div style="display: flex; align-items: center; padding-top: 13px;line-height: 15px;">
                        <input type="checkbox" v-model="showTable2">
                        <div class="add_btn" @click="addtable2()" v-if="showTable2">添加收费标准</div>
                    </div>
                    <!-- 根据 showTable 的值来决定是否显示表格 -->
                    <div class="table" v-if="showTable2">
                        <table class="table_top">
                            <thead>
                                <tr>
                                    <th class="two">名称</th>
                                    <th class="two">数量（天）</th>
                                    <th class="two">总价（元）</th>
                                    <th class="two">单价（元/天）</th>
                                    <th class="three">编辑/删除</th>
                                </tr>
                            </thead>
                            <tbody id="list">
                                <tr v-for="(dailyRate,index) in list2" :key="index">
                                    <td class="two">
                                        <input type="text" v-model="dailyRate.name" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="dailyRate.number" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="dailyRate.amount" placeholder="请输入(必填)" />
                                    </td>

                                    <td class="two" v-if="dailyRate.price" v-text="dailyRate.price"></td>
                                    <td class="two" v-else>自动计算</td>
                                    <td class="three">
                                        <div class="option">
                                            <div class="delete-icon option-icon" @click="del2(index)"
                                                style="right: 30%; top:30%;position: absolute;">
                                                <img class="img" src="../image/delete.png" height="20" width="20"
                                                    onmouseover="this.src='../image/delete_light.png'"
                                                    onmouseout="this.src='../image/delete.png'" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">按季收费</label>
                <div class="layui-input-block">
                    <!-- 切换开关 -->
                    <!-- <label class="layui-form-switch" style="margin-left: 10px;"> -->
                    <div style="display: flex; align-items: center; padding-top: 13px;line-height: 15px;">
                        <input type="checkbox" v-model="showTable3">
                        <!-- <i class="layui-icon layui-icon-switch"></i> -->
                        <!-- </label> -->
                        <div class="add_btn" @click="addtable3()" v-if="showTable3">添加收费标准</div>
                    </div>

                    <!-- 根据 showTable 的值来决定是否显示表格 -->
                    <div class="table" v-if="showTable3">
                        <table class="table_top">
                            <thead>
                                <tr>
                                    <th class="two">名称</th>
                                    <th class="two">数量（季）</th>
                                    <th class="two">总价（元）</th>
                                    <th class="two">单价（元/季）</th>
                                    <th class="three">编辑/删除</th>
                                </tr>
                            </thead>
                            <tbody id="list">
                                <tr v-for="(quarterlyHarvest,index) in list3" :key="index">
                                    <td class="two">
                                        <input type="text" v-model="quarterlyHarvest.name" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="quarterlyHarvest.number" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="quarterlyHarvest.amount" placeholder="请输入(必填)" />
                                    </td>

                                    <td class="two" v-if="quarterlyHarvest.price" v-text="quarterlyHarvest.price"></td>
                                    <td class="two" v-else>自动计算</td>
                                    <td class="three">
                                        <div class="option">
                                            <div class="delete-icon option-icon" @click="del3(index)"
                                                style="right: 30%; top:30%;position: absolute;">
                                                <img class="img" src="../image/delete.png" height="20" width="20"
                                                    onmouseover="this.src='../image/delete_light.png'"
                                                    onmouseout="this.src='../image/delete.png'" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>



            <div class="layui-form-item">
                <label class="layui-form-label">按期收费</label>
                <div class="layui-input-block">
                    <!-- 切换开关 -->
                    <div style="display: flex; align-items: center; padding-top: 13px;line-height: 15px;">
                        <input type="checkbox" v-model="showTable4">
                        <div class="add_btn" @click="addtable4()" v-if="showTable4">添加收费标准</div>
                    </div>
                    <!-- 根据 showTable 的值来决定是否显示表格 -->
                    <div class="table" v-if="showTable4">
                        <table class="table_top">
                            <thead>
                                <tr>
                                    <th class="two">名称</th>
                                    <th class="two">数量（期）</th>
                                    <th class="two">总价（元）</th>
                                    <th class="two">单价（元/期）</th>
                                    <th class="three">编辑/删除</th>
                                </tr>
                            </thead>
                            <tbody id="list">
                                <tr v-for="(forwardHarvest,index) in list4" :key="index">
                                    <td class="two">
                                        <input type="text" v-model="forwardHarvest.name" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="forwardHarvest.number" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="forwardHarvest.amount" placeholder="请输入(必填)" />
                                    </td>

                                    <td class="two" v-if="forwardHarvest.price" v-text="forwardHarvest.price"></td>
                                    <td class="two" v-else>自动计算</td>
                                    <td class="three">
                                        <div class="option">
                                            <div class="delete-icon option-icon" @click="del4(index)"
                                                style="right: 30%; top:30%;position: absolute;">
                                                <img class="img" src="../image/delete.png" height="20" width="20"
                                                    onmouseover="this.src='../image/delete_light.png'"
                                                    onmouseout="this.src='../image/delete.png'" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">按课包收费</label>
                <div class="layui-input-block">
                    <!-- 切换开关 -->
                    <div style="display: flex; align-items: center; padding-top: 13px;line-height: 15px;">
                        <input type="checkbox" v-model="showTable5">
                        <div class="add_btn" @click="addtable5()" v-if="showTable5">添加收费标准</div>
                    </div>

                    <!-- 根据 showTable 的值来决定是否显示表格 -->
                    <div class="table" v-if="showTable5">
                        <table class="table_top">
                            <thead>
                                <tr>
                                    <th class="two">名称</th>
                                    <th class="two">数量（课包）</th>
                                    <th class="two">总价（元）</th>
                                    <th class="two">单价（元/课包）</th>
                                    <th class="three">编辑/删除</th>
                                </tr>
                            </thead>
                            <tbody id="list">
                                <tr v-for="(lessonPackage,index) in list5" :key="index">
                                    <td class="two">
                                        <input type="text" v-model="lessonPackage.name" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="lessonPackage.number" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="lessonPackage.amount" placeholder="请输入(必填)" />
                                    </td>

                                    <td class="two" v-if="lessonPackage.price" v-text="lessonPackage.price"></td>
                                    <td class="two" v-else>自动计算</td>
                                    <td class="three">
                                        <div class="option">
                                            <div class="delete-icon option-icon" @click="del5(index)"
                                                style="right: 30%; top:30%;position: absolute;">
                                                <img class="img" src="../image/delete.png" height="20" width="20"
                                                    onmouseover="this.src='../image/delete_light.png'"
                                                    onmouseout="this.src='../image/delete.png'" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">按体验课收费</label>
                <div class="layui-input-block">
                    <!-- 切换开关 -->
                    <div style="display: flex; align-items: center; padding-top: 13px;line-height: 15px;">
                        <input type="checkbox" v-model="showTable6">
                        <div class="add_btn" @click="addtable6()" v-if="showTable6">添加收费标准</div>
                    </div>

                    <!-- 根据 showTable 的值来决定是否显示表格 -->
                    <div class="table" v-if="showTable6">
                        <table class="table_top">
                            <thead>
                                <tr>
                                    <th class="two">名称</th>
                                    <th class="two">数量（课）</th>
                                    <th class="two">总价（元）</th>
                                    <th class="two">单价（元/课）</th>
                                    <th class="three">编辑/删除</th>
                                </tr>
                            </thead>
                            <tbody id="list">
                                <tr v-for="(experience,index) in list6" :key="index">
                                    <td class="two">
                                        <input type="text" v-model="experience.name" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="experience.number" placeholder="请输入(必填)" />
                                    </td>
                                    <td class="two">
                                        <input type="text" v-model="experience.amount" placeholder="请输入(必填)" />
                                    </td>

                                    <td class="two" v-if="experience.price" v-text="experience.price"></td>
                                    <td class="two" v-else>自动计算</td>
                                    <td class="three">
                                        <div class="option">
                                            <div class="delete-icon option-icon" @click="del6(index)"
                                                style="right: 30%; top:30%;position: absolute;">
                                                <img class="img" src="../image/delete.png" height="20" width="20"
                                                    onmouseover="this.src='../image/delete_light.png'"
                                                    onmouseout="this.src='../image/delete.png'" />
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="offer" @click="submit">立即提交</div>
                    <div class="return" onclick="history.back()">取消</div>
                </div>
            </div>
        </div>
    </div>
    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/item.js"></script>

    <script>
        var app = new Vue({
            el: '#vue-root',
            data: {
                item: {
                    agentId: top_params().id,
                    type: 1
                },
                url: '/pc/course',
                classHour: [],
                month: [],
                dailyRate: [],
                quarterlyHarvest: [],
                forwardHarvest: [],
                lessonPackage: [],
                experience: [],
                showTable: false,
                showTable1: false,
                showTable2: false, // 控制表格显示隐藏的布尔变量
                showTable3: false,
                showTable4: false,
                showTable5: false,
                showTable6: false,
                courseCategorys: []


            },
            methods: {
                generateRandomNumber() {
                    var randomNumber = Math.floor(100000 + Math.random() * 900000);
                    return randomNumber;
                },
                addtable() {
                    this.classHour.push({
                        id: this.generateRandomNumber(),
                        name: '',
                        number: '',
                        amount: '',
                        price: ''
                    })
                },
                addtable1() {
                    this.month.push({
                        id: this.generateRandomNumber(),
                        name: '',
                        number: '',
                        amount: '',
                        price: ''
                    })
                },
                addtable2() {
                    this.dailyRate.push({
                        id: this.generateRandomNumber(),
                        name: '',
                        number: '',
                        amount: '',
                        price: ''
                    })
                },
                addtable3() {
                    this.quarterlyHarvest.push({
                        id: this.generateRandomNumber(),
                        name: '',
                        number: '',
                        amount: '',
                        price: ''
                    })
                },
                addtable4() {
                    this.forwardHarvest.push({
                        id: this.generateRandomNumber(),
                        name: '',
                        number: '',
                        amount: '',
                        price: ''
                    })
                },
                addtable5() {
                    this.lessonPackage.push({
                        id: this.generateRandomNumber(),
                        name: '',
                        number: '',
                        amount: '',
                        price: ''
                    })
                },
                addtable6() {
                    this.experience.push({
                        id: this.generateRandomNumber(),
                        name: '',
                        number: '',
                        amount: '',
                        price: ''
                    })
                },
                del(i) {
                    this.classHour.splice(i, 1)
                },
                del1(i) {
                    this.month.splice(i, 1)
                },
                del2(i) {
                    this.dailyRate.splice(i, 1)
                },
                del3(i) {
                    this.quarterlyHarvest.splice(i, 1)
                },
                del4(i) {
                    this.forwardHarvest.splice(i, 1)
                },
                del5(i) {
                    this.lessonPackage.splice(i, 1)
                },
                del6(i) {
                    this.experience.splice(i, 1)
                },

                submit: function () {
                    // 构建要发送的数据
                    var data = {
                        name: this.item.name,
                        type: this.item.type,
                        agentId: this.item.agentId,
                        courseCategoryId: this.item.courseCategoryId,
                        classHour: this.list,
                        month: this.list1,
                        dailyRate: this.list2,
                        quarterlyHarvest: this.list3,
                        forwardHarvest: this.list4,

                        lessonPackage: this.list5,
                        experience: this.list6,

                        attachment: this.item.attachment,
                        startMinute: this.item.startMinute,
                        endMinute: this.item.endMinute
                    };
                    if (params().id) data.id = params().id;
                    console.log(this.item.attachment, "msdajfk");
                    if (!params().id) {
                        axios.post(this.url, data)
                            .then(function (response) {
                                history.back();
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    } else {
                        axios.post('/pc/course/update', data)
                            .then(function (response) {
                                history.back();
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    }
                }
            },
            created: function () {
                axios.get('/pc/courseCategory/all/' + this.item.agentId).then(function (res) {
                    this.courseCategorys = res.data;
                }.bind(this));
                if (!params().id) {

                    return;
                }

                axios.get('/pc/course/' + params().id).then(function (res) {
                    var data = res.data
                    this.item = data;
                    if (data.classHour.length > 0) {
                        this.classHour = data.classHour;
                        this.showTable = true;
                    }
                    if (data.month.length > 0) {
                        this.month = data.month;
                        this.showTable1 = true;
                    }
                    if (data.dailyRate.length > 0) {
                        this.dailyRate = data.dailyRate;
                        this.showTable2 = true;
                    }
                    if (data.quarterlyHarvest.length > 0) {
                        this.quarterlyHarvest = data.quarterlyHarvest;
                        this.showTable3 = true;
                    }
                    if (data.forwardHarvest.length > 0) {
                        this.forwardHarvest = data.forwardHarvest;
                        this.showTable4 = true;
                    }
                    if (data.lessonPackage.length > 0) {
                        this.lessonPackage = data.lessonPackage;
                        this.showTable5 = true;
                    }
                    if (data.experience.length > 0) {
                        this.experience = data.experience;
                        this.showTable6 = true;
                    }
                }.bind(this));

            },
            computed: {
                list() {
                    var lists = this.classHour
                    lists.forEach(item => {
                        var price = Number(item.amount) / Number(item.number);
                        item.price = price % 1 === 0 ? price : price.toFixed(2);
                    });
                    return lists;
                },
                list1() {
                    var lists = this.month
                    lists.forEach(item => {
                        var price = Number(item.amount) / Number(item.number);
                        item.price = price % 1 === 0 ? price : price.toFixed(2);
                    });
                    return lists;
                },
                list2() {
                    var lists = this.dailyRate
                    lists.forEach(item => {
                        var price = Number(item.amount) / Number(item.number);
                        item.price = price % 1 === 0 ? price : price.toFixed(2);
                    });
                    return lists;
                },
                list3() {
                    var lists = this.quarterlyHarvest
                    lists.forEach(item => {
                        var price = Number(item.amount) / Number(item.number);
                        item.price = price % 1 === 0 ? price : price.toFixed(2);
                    });
                    return lists;
                },
                list4() {
                    var lists = this.forwardHarvest
                    lists.forEach(item => {
                        var price = Number(item.amount) / Number(item.number);
                        item.price = price % 1 === 0 ? price : price.toFixed(2);
                    });
                    return lists;
                },
                list5() {
                    var lists = this.lessonPackage
                    lists.forEach(item => {
                        var price = Number(item.amount) / Number(item.number);
                        item.price = price % 1 === 0 ? price : price.toFixed(2);
                    });
                    return lists;
                },
                list6() {
                    var lists = this.experience
                    lists.forEach(item => {
                        var price = Number(item.amount) / Number(item.number);
                        item.price = price % 1 === 0 ? price : price.toFixed(2);
                    });
                    return lists;
                }
            }
        });
    </script>

</body>

</html>